<template>
  <Teleport to="#global">
    <Transition appear name="fadeIn">
      <div class="blackModal" v-show="open" @wheel="wheelEvent">
        <slot></slot>
        <div @click="closeBlackModal" class="blackModal-close">
          <i class="iconfont iconcuowu"></i>
        </div>
      </div>
    </Transition>
  </Teleport>
</template>

<script setup lang="ts">
import { Teleport, defineProps, defineEmits } from 'vue'
import { fangdouUtil } from '@/util/util'

const props = defineProps<{ open: boolean }>()

const emit = defineEmits(['close', 'wheel'])

// 关闭遮罩层
const closeBlackModal = () => {
  emit('close')
}

const wheelEvent = (e: WheelEvent) => {
  fangdouUtil(() => emit('wheel', e), 200)
}
</script>

<style lang="scss" scoped>
@import './style.scss';
@import '../../css/comment/animate.css';
</style>
